<template>
	<view>
		<view class="search">
			<u-input placeholder="输入搜索内容" v-model="search" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" clearable :customStyle="{backgroundColor:'#F8F8F8'}">
				<template slot="suffix"> <text class="search_text" @click="getArticlelist(true)">搜索</text> </template>
			</u-input>
		</view>
		<view class="search_log" v-if="!searched">
			<view class="title">
				历史搜索
				<u-icon name="trash" size="26" @click="delLog"></u-icon>
			</view>
			<view class="list">
				<view class="item" v-for="(item ,index) in searchLogList" :key="index" @click="searchHis(item)">
					{{item.search}}
				</view>
			</view>
		</view>
		<view class="search_result" v-else>
			<u-empty mode="car" icon="/static/images/default_empty.png" text="搜不到相关内容" v-if="articlelists.length <= 0"></u-empty>
			<view class="list" v-else>
				<view class="item" v-for="(item,index) in articlelists" @click="toDetail(item)">
					<view class="img">
						<img :src="baseUrl + item.image" alt="" mode="widthFix">
					</view>
					<view class="info">
						<view class="title u-line-1">
							{{item.name}}
						</view>
						<rich-text class="desc u-line-2" :nodes="item.content"></rich-text>
					</view>
				</view>
			</view>
			<view style="text-align: center;" v-if="articlelists.length > 0">
				<u-loadmore :status="status" :loading-text="loadingText"  :loadmore-text="loadmoreText"  :nomore-text="nomoreText"/>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/api/request.js'
	import {
		articlelist,searchlog,delsearchlog
	} from '@/api/api.js'
	export default {
		data() {
			return {
				search:'',
				searched:false,
				attrList:[],
				articlelists:[],
				page:0,
				total:0,
				baseUrl,
				searchLogList:[],
				status:'loadmore',
				loadingText: '正在拼命加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有更多了~',
			};
		},
		onLoad(options){
			this.getSearchlog()
		},
		onReachBottom() {
			this.getArticlelist()
		},
		methods:{
			getSearchlog(){
				searchlog().then(res=>{
					console.log(res);
					this.searchLogList = res.data
				})
			},
			delLog(){
				delsearchlog().then(res=>{
					uni.showToast({
						title:'删除成功',
						icon:'none'
					})
					this.getSearchlog()
				})
			},
			searchHis(item){
				this.search = item.search
				this.getArticlelist(true)
			},
			getArticlelist(flag = false){
				if(this.search && this.search != ''){
					if(flag){
						this.page = 0
						this.status = 'loadmore'
						this.articlelists = []
					}else if(this.status == 'nomore'){
						return
					}
					this.page++
					this.status = 'loading'
					articlelist({search:this.search,page:this.page}).then(res=>{
						this.searched = true
						this.articlelists.push(...res.data.data)
						this.total = res.data.total
						if(this.total <= this.articlelists.length){
							this.status = 'nomore'
						}else {
							this.status = 'loadmore'
						}
					})
				}else {
					uni.showToast({
						title:'请输入搜索内容',
						icon:'none'
					})
				}
			},
			toDetail(item){
				if(item.enum == '产品'){
					uni.navigateTo({
						url:'/pages/product/question?id=' + item.id
					})
				}else  {
					uni.navigateTo({
						url:`/pages/product/detail?id=${item.id}&pId=${item.p_id}`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	view {
		box-sizing: border-box;
	}
	.search {
		padding: 18rpx 0;
		background-color: #fff;
		&_text {
			font-size: 28rpx;
			font-weight: 600;
			color: #CE3026;
			line-height: 48rpx;
		}
	}
	
	.search_log {
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
			line-height: 84rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx 40rpx;
			.item {
				padding: 8rpx 16rpx;
				background: #F8F8F8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 52rpx;
			}
		}
	}
	
	.search_result {
		.item {
			padding: 20rpx 40rpx 20rpx 32rpx;
			display: flex;
			.img {
				width: 176rpx;
				img {
					width: 176rpx;
					border-radius: 8rpx;
				}
				margin-right: 20rpx;
			}
			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}
			.desc {
				font-size: 24rpx;
				margin-top: 10rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}
	}
	
</style>
